<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" itemscope="" itemtype="http://schema.org/Article" lang="en">
<head>
    <title>GISMETEO.RU: Создание снежинки </title>
    <script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>

    
    <script type="text/javascript" src="/js/bind.js"></script>
        
<style type="text/css" charset="utf-8">
body {
	background:#066;
	
}
.gallery figure {
	font-size: 15px;
	float:left;
	display:none;
	padding:5px;
	background:#fff;}
	
.gallery .hole {
	width:750px;
	float:left;
	margin-left:10px;}
	
.gallery .lenta {
	
	padding:50px 10px 30px 60px;
	overflow:hidden;
	zoom:1;}

.gallery .arrowleft, .gallery .arrowright {
	width:50px;
	height:50px;
	
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	-ms-border-radius:30px;
	
	box-shadow: 1px 1px 5px #000;
	-webkit-box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	-ms-box-shadow: 1px 1px 1px 5px #000;
	
	behavior:url(/js/PIE.php);
	background:#fff;

	display:block;
	float:left;
	margin-top: 120px;
	}
	
	.gallery .first, .gallery .second, .gallery .third {
		display:block;	
	}
	
	.gallery .first {
		padding-left: 7px;
		
	
		-moz-transform:rotate(5deg);
		-webkit-transform:rotate(5deg);
		-o-transform:rotate(5deg);
		-ms-transform:rotate(5deg);
		
	
	}
	.gallery .second {
		margin-left: -30px;
		
	
		-moz-transform:rotate(-15deg);
		-webkit-transform:rotate(-15deg);
		-o-transform:rotate(-15deg);
		-ms-transform:rotate(-15deg);
	
			
		}
	.gallery .third {
		margin-left: -30px;
		
	
		-moz-transform:rotate(-5deg);
		-webkit-transform:rotate(-5deg);
		-o-transform:rotate(-5deg);
		-ms-transform:rotate(-5deg);
		
		
	
	


</style>

<!--[if lte IE 8]>
<style type="text/css" charset="utf-8">
	
	.gallery .first {
		
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765832, M21=0.08715574274765832, M22=0.9961946980917455, SizingMethod='auto expand')";
   
   
  		 filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9961946980917455,
            M12=-0.08715574274765832,
            M21=0.08715574274765832,
            M22=0.9961946980917455,
            SizingMethod='auto expand');
	}
	.gallery .second {

		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890684, M12=0.25881904510252024, M21=-0.25881904510252024, M22=0.9659258262890684, SizingMethod='auto expand')";
   
	   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9659258262890684,
            M12=0.25881904510252024,
            M21=-0.25881904510252024,
            M22=0.9659258262890684,
            SizingMethod='auto expand');
			
		}
	.gallery .third {
		
	   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917454, M12=0.08715574274765871, M21=-0.08715574274765871, M22=0.9961946980917454, SizingMethod='auto expand')";
   
 	  filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9961946980917454,
            M12=0.08715574274765871,
            M21=-0.08715574274765871,
            M22=0.9961946980917454,
            SizingMethod='auto expand');
		}
	
	


</style>
<![endif]-->


</head>
<body>

	
    
    <section class="gallery">
    
        <section class="scroll">
            <a href="" class="arrowleft"></a>
            <div class="hole">
                    <div class="lenta">
                        <figure id="ss">
                        		<img src="/images/img1.jpg">
                                <figcaption >
                                    <span contentId="01912b491fa41e0ca7c51fd336a8dde8">0</span>
                                    <ins><strong>Денис Тесттри</strong><br>м. КИЇВ</ins>
                                </figcaption>
                        </figure>
                        <figure>
		                        <img src="/images/img2.jpg">
                                <figcaption >
                                    <span contentId="e8df4766054c24ef6ec287a790d0a650">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                        <figure>
                        	<img src="/images/img3.jpg">
                                <figcaption >
                                    <span contentId="d9925cadd2594ed474a0b54007520afd">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                        <figure>
                        	<img src="/images/img4.jpg">
                                <figcaption >
                                    <span contentId="3b5a841acb34b47c7d9b37c3c566761f">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                        <figure>
                        	<img src="/images/img5.jpg">
                                <figcaption >
                                    <span contentId="3b5a841acb34b47c7d9b37c3c566761f">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                        <figure>
                        	<img src="/images/img6.jpg">
                                <figcaption >
                                    <span contentId="3b5a841acb34b47c7d9b37c3c566761f">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                        <figure>
                        	<img src="/images/img7.jpg">
                                <figcaption >
                                    <span contentId="3b5a841acb34b47c7d9b37c3c566761f">0</span>
                                    <ins><strong>Юрий Каааамов</strong><br>с. РУДНЯ</ins>
                                </figcaption>
                        </figure>
                       </div>
                </div> 
                 <a href="" class="arrowright"></a>        
         </section>
        
     	
    </section>
    
    <script type="text/javascript">
$(function(){
	
	function Gallery(id){
		var myself = this;
		this.$gallery = $(id);
		this.$figure = this.$gallery.find("figure");
		this.masClass = ["first", "second", "third"];
		//this.$image = this.$figure.find("img");
		this.indexActive = 0;
		
		this.$arrowright = this.$gallery.find(".arrowright");
		this.$arrowleft = this.$gallery.find(".arrowleft");
		
		
		
		
		var i = 0;
		this.$figure.each(function() {
				$(this).addClass(myself.masClass[i]);
				
				if(i<2)  i++ 
				else i=0;
		});
		
		this.image = this.$figure.map(function(){
			return {
					"width" :$(this).find("img").width(),
					"height":$(this).find("img").height(),
					"widthFigure" : $(this).width(),
					"heightFigure" : $(this).height()
					}
		})
		
		
		this.$figure.slice(3,this.$figure.length).hide();

		
		this.$figure.bind("mouseenter", this.figureOver);
		this.$figure.bind("mouseleave", this.figureOut);
		
		this.$arrowleft.bind("click", this.page.bind(this));
		this.$arrowright.bind("click", this.page.bind(this));
	}
	
	Gallery.prototype.smallingImg = function($first, $firstImg, $firstFigcaption){
		var myself = this;
			function animate(){
				
				var relation = ($first.height() > $first.width()) ? Math.abs($first.height()/$first.width()) : Math.abs($first.width()/$first.height()),
					relationImg = ($firstImg.height() < $firstImg.width()) ? Math.abs($firstImg.height()/$firstImg.width()) : Math.abs($firstImg.width()/$firstImg.height());
				
				$first.css({
					'height' : ($first.height() - 5) + 'px',
					'width' : ($first.width() - (relation+5)) + 'px'
				})
				
				$firstImg.css({
					'height' : ($firstImg.height() - (relationImg+3)) + 'px',
					'width' : $first.width() + 'px'
				})
				
				$firstFigcaption.css({
					'font-size' : ( parseInt($firstFigcaption.css('font-size')) - 1) + 'px'
				})
				
				if ($first.width() < 6) {
					clearInterval(keyAnimate);
			
					$first.hide();
					
				}
				
			}
			var keyAnimate = setInterval(animate, 1);
	
	};
	
	
	
	Gallery.prototype.bigingImg = function($lastnext, $lastNextImg, $lastNextFigcaption, lastnextActive){
		
		var myself = this;
		
		var lastnextWidth = this.image[lastnextActive].widthFigure,
			lastnextHeight = this.image[lastnextActive].heightFigure,
			lastNextImgWidth = this.image[lastnextActive].width,
			lastNextImgHeight = this.image[lastnextActive].height;
				
				
			
				relation = (lastnextHeight > lastnextWidth) ? lastnextHeight/lastnextWidth : lastnextWidth/lastnextHeight,
				relationImg = lastNextImgHeight/lastNextImgWidth;
				
				
			
				$lastNextFigcaption.css({
					'font-size' : 0 + 'px'
				});
				
				$lastnext.width(1);
				$lastnext.height(1);
				$lastNextImg.width(1);
				$lastNextImg.height(1);
				
				$lastnext.show();
				
				
				function animateSecond(){
				
					if(lastnextHeight < lastnextWidth){
						var height = $lastnext.height()+5,
							width = height*relation;
					}else{
						var width = $lastnext.width()+5,
							height = width*relation;
					}
					
					var widthImg = width,
						heightImg = widthImg*relationImg;
							
					$lastnext.css({
						'height' : height + 'px',
						'width' :  width + 'px'
					});
					
					$lastNextImg.css({
						'width' : widthImg + 'px',
						'height' : heightImg + 'px'
					})
					

					
					if ($lastnext.width() > lastnextWidth) {
						clearInterval(keyanimateSecond);
						$lastNextFigcaption.css({'font-size':"15px"})
					}
					
				}
				var keyanimateSecond = setInterval(animateSecond, 1)
	};
	
	Gallery.prototype.page = function(event){
		
			event.preventDefault();
			var myself = this;
			
			if($(event.currentTarget).hasClass("arrowright")){
				
				if((this.indexActive+4) > this.$figure.length) return false;
				
				var $first = $(myself.$figure[myself.indexActive]);
				var lastnextActive = myself.indexActive+3;
			}else{
				
				if(this.indexActive < 1) return false;
				
				var $first = $(myself.$figure[myself.indexActive+2]);
				var lastnextActive = myself.indexActive-1;
				//console.log($(myself.$figure[lastnextActive]))
			}
			
			var $firstImg = $first.find("img"),
				$firstFigcaption = $first.find("figcaption");

				this.smallingImg( $first, $firstImg, $firstFigcaption)

				
			var $lastnext = $(myself.$figure[lastnextActive]),
				$lastNextImg = $lastnext.find("img"),
				$lastNextFigcaption = $lastnext.find("figcaption");

				this.bigingImg( $lastnext, $lastNextImg, $lastNextFigcaption, lastnextActive)
				
			
			this.indexActive = ($(event.currentTarget).hasClass("arrowright")) ? this.indexActive + 1 : this.indexActive - 1;
			
	}
	
	
	Gallery.prototype.figureOver = function(){
		$(this).css({"z-index":5}).find("img").animate({
			width: $(this).find("img").width()*1.2 + "px",
			height: $(this).find("img").height()*1.2 + "px"
		});
	}
	
	Gallery.prototype.figureOut = function(){
		$(this).css({"z-index":2}).find("img").animate({
			width: $(this).find("img").width()/1.2 + "px",
			height: $(this).find("img").height()/1.2 + "px"
		});
	}
	

	
	new Gallery(".gallery")
	
})
</script>
   
</body>
</html>